<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html lang="zh-CN">
<head>
	<title>录音查询</title>
	<meta name="decorator" content="default"/>
</head>
<body>
	<form:form id="searchForm" modelAttribute="recordInfoQuery" action="${ctx}/call/record/recordinfo/list" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<ul class="ul-form" style="min-width: 100%">
			<li>
                <div class="input-prepend">
                    <span class="add-on">坐席工号</span>
                    <form:input path="agentID" type="text" maxlength="20" class="input-medium" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                </div>
                <div class="input-prepend">
                    <span class="add-on">被叫号码</span>
                    <form:input path="calledNum" maxlength="20" type="text" class="input-medium" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                </div>
                <div class="input-prepend">
                    <span class="add-on">呼叫类型</span>
                    <form:select path="callType" cssClass="select-medium">
                        <form:option value="0">全部</form:option>
                        <form:option value="1">呼入</form:option>
                        <form:option value="2">呼出</form:option>
                    </form:select>
                </div>
			</li>
			<li class="clearfix"></li>
		</ul>
        <ul class="ul-form">
            <li>
                <div class="input-prepend">
                    <span class="add-on">开始时间</span>
                    <form:input path="beginDateTime" type="text" class="input-medium Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d %H:%m:%s'})"  />
                </div>
                <div class="input-prepend">
                    <span class="add-on">结束时间</span>
                    <form:input path="endDateTime" type="text" class="input-medium Wdate" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d 23:59:59'})"  />
                </div>
                <div class="input-prepend">
                    <span class="add-on">通话时长</span>
                    <form:input path="beginCallTime" type="text" maxlength="10" style="width: 60px;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                    <span class="add-on">至</span>
                    <form:input path="endCallTime" type="text" maxlength="10"  style="width: 60px;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
                </div>
            </li>
            <li class="btns">
                <button id="btnSubmit" class="btn btn-small btn-primary" type="button" onclick="page(1)">
                   	 查询<span class="icon-search icon-white"></span>
                </button>
            </li>
            <li class="clearfix"></li>
        </ul>
	</form:form>
	<sys:message content="${message}"/>
	<table id="contentTable" class="table table-striped table-bordered table-condensed table-hover static-table" style="min-width: 1000px;">
		<thead>
			<tr>
		        <th colspan="13">
		            <ul class="nav nav-toolbar">
		                <li>
		                    <a class="plxz" href="javascript:void(0);">批量下载</a>
		                </li>
		                <li>|</li>
		                <li>
		                    <a class="dc" id="btnExport" href="javascript:void(0);">导出</a>
		                </li>
		            </ul>
		        </th>
    		</tr>
			<tr>
				<th style="width: 30px;">选择</th>
				<th>序号</th>
				<th>工号</th>
				<th width="50px">姓名</th>
				<th>呼叫类型</th>
				<th>主叫号码</th>
				<th>被叫号码</th>
				<th width="150px">呼叫开始时间</th>
				<th width="150px">呼叫结束时间</th>
				<th>通话时长</th>
				<th>振铃时长</th>
				<th>总时长</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${page.list}" var="recordInfo" varStatus="vs">
			<tr class="list">
				<td style="text-align: center;">
					<input type="checkbox" value="/${fn:substring(recordInfo.callerNO,6,12) }/${recordInfo.finalFileName }"/>
				</td>
				<td>${vs.count }</td>
				<td>${recordInfo.agentID}</td>
				<td>${recordInfo.agentName}</td>
				<td>
					<c:if test="${recordInfo.direction=='1' || recordInfo.direction=='3'}">呼入</c:if>
      				<c:if test="${recordInfo.direction=='2' || recordInfo.direction=='4'}">呼出</c:if>
				</td>
				<c:choose>
    				<c:when test="${recordInfo.direction=='1' || recordInfo.direction=='3'}">
	    				<td>${recordInfo.calleeNO}</td>
	   					<td>${recordInfo.callerNO}</td>
    				</c:when>
    				<c:otherwise>
    					<td>${recordInfo.callerNO}</td>
  						<td>${recordInfo.calleeNO}</td>
    				</c:otherwise>
    			</c:choose>
				<td><fmt:formatDate value="${recordInfo.beginTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
				<td><fmt:formatDate value="${recordInfo.endTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
				<td>${recordInfo.callTime }</td>
				<td>${recordInfo.ringTime }</td>
				<td>${recordInfo.totalTime }</td>
				<%-- <shiro:hasPermission name="test:recordInfo:edit"> --%>
				<td data-file="${fns:getConfig('call.record.default.path')}/${fn:substring(recordInfo.callerNO,6,12) }/${recordInfo.finalFileName }">
    				<a href="javascript:void(0);" class="bofang">播放</a>
					<a href="javascript:void(0);" class="xiazai">下载</a>
				</td>
				<%-- </shiro:hasPermission> --%>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="pagination">${page}</div>
	<script type="text/javascript" src="${ctxStatic }/common/player.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".bofang").click(function(){
				var audioPath = $(this).parent().data("file");
				palyer(audioPath);
			});
			$(".xiazai").click(function(){
			 	this.href = "${ctx}/call/record/recordinfo/download?filePath="+$(this).parent().data("file");
			});
			$(".plxz").click(function(){
				var selectedData = $("input[type='checkbox']:checked");
				if(!selectedData.length) {
					alertx("请选择需要下载的记录，每次限制10条！");
					return false;
			 	} else if(selectedData.length > 10) {
				 	alertx("您选择的记录超过10条，每次限制10条！");
				 	return false;
			 	} else {
				 	var fileNames = new Array();
				 	for (var i = 0; i < selectedData.length; i++) {
					 	fileNames.push(selectedData[i].value);
				 	}
				 	this.href = "${ctx}/call/record/recordinfo/zipDownload?fileNames="+fileNames;
			 	}
			});
            $("#btnExport").click(function(){
                var param = $("#searchForm").serialize();
                loading("请稍后正在初始化导出!");
                $.post("${ctx}/call/record/recordinfo/vaildateExport",param,
                       function(data){
                           closeTip();
                           if(data.state==true){
                               confromExport(data,param);
                           }else{
                               alertx(data.message);
                           }
                       },"json"
                )
            });

            function makeTimeOutExport(url,count){
                setTimeout(function(){
                    $.get(url,function(data){
                        if(data.state){
                            closeTip();
                        }else{
                            if(data.value){
                                if(data.value.hasNext){
                                    loading("正在查询数据,已经完成"+Math.round(data.value.next/data.value.max*100)+"%");
                                }else{
                                    loading("查询数据已经完成,正在生成文件,请稍后……");
                                }
                            }
                            makeTimeOutExport(url,count);
                        }
                    });
                },3000);
            }

            function ajaxMapExport(params,count){
                var checkUrl = "${ctx}/export/checkLocker.shtml?id=callRecordsExport";
                $.get(checkUrl,function(data){
                    if(data.state){
                        loading("初始化导出数据开始……");
                        var exportURL = "${ctx}/call/record/recordinfo/mapExport?"+params;
                        window.location.href = exportURL;
                        makeTimeOutExport(checkUrl,count);
                    }else{
                        alertx("该表正被另外一个用户导出!为了减少服务器压力请稍后在进行导出操作!");
                    }
                });
            }

            function confromExport(data,param){
                top.$.jBox.confirm("您要导出的数据有"+data.count+"条信息", "确认要导出?",
                    function (v, h, f) {
                        if (v == 'ok') {
                            ajaxMapExport(param,data.count);
                        }
                    },
                    {
                        opacity: 0.4,
                        persistent: true
                    });
            }
        //document init end
		});
		
		/*
		 *分页查询或条件查询
		 */
		function page(n,s){
			loading('正在查询，请稍等...');
			if(n) $("#pageNo").val(n);
			if(s) $("#pageSize").val(s);
			$("#searchForm").submit();
	    	return false;
	    }
	</script>
</body>
</html>